<template>
  <div class="jdys-container">
    <div class="left-panel">
      <div class="drawer-head">
        <span>节点要素</span>
      </div>
      <div class="panel-tree">
        <el-tree
          ref="jdysRefTree"
          :data="treeData"
          node-key="nm"
          :highlight-current="true"
          :props="{children: 'children',label: 'label' }"
          @node-click="handleNodeClick"
          default-expand-all
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            {{ data.label }}
          </span>
        </el-tree>
      </div>
    </div>
    <div class="right-panel">
      <!-- 上部分：组织机构 -->
      <div class="org-section">
        <div class="section-head">
          <span>节点编成</span>
        </div>
        <div class="org-content" id="graphContainer">
          <!-- 这里添加组织机构的具体内容 -->
        </div>
      </div>
      <!-- 下部分：作战实力 -->
      <div class="combat-section">
        <div class="section-head" @click="getData">
          <span>作战实力</span>
        </div>
        <div class="combat-content" @dragover.prevent @drop="handleDrop">
          <!-- 这里添加作战实力的具体内容 -->
          <!-- 人员区块 -->
          <div class="block-head">人员岗位</div>
          <div class="attribute-block" style="background-color: #fff;margin: 5px 10px 10px;">
            <div class="block-content" style="border: 1px solid #0a5387;">
              <div v-if="!personnelBlock || personnelBlock.length === 0"
                   style="font-size:14px; margin-left: 10px; color: #666666;"
              >暂无数据
              </div>
              <div v-for="(item, index) in personnelBlock" :key="'dropped-personnel-' + index"
                   class="dropped-item" @mouseenter="() => showTool = item" @mouseleave="() => showTool = null">
                <div style="width: 60px;height: 80px; padding: 5px 8px;">
                  <el-image :src="require('@/assets/image/25.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name" :title="item.name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 装备区块 -->
          <div class="block-head">装备类型</div>
          <div style="display: flex;flex-wrap: wrap; padding: 0 10px;">
            <template v-for="(item, index) in equipmentBlock">
              <div class="wqzb-content" @mouseenter.stop="() => showTool = item" @mouseleave="() => showTool = null">
                <div class="block-body">
                  <div class="dropped-item" :title="item.wqzbmc">
                    <div class="" style="width: 90px; height: 70px;" >
                      <el-image :src="item.icon ? require(`@/assets/image/wqzb/${item.icon}.png`) : null"
                                fit="fill" style="width:100%; height: 100%"
                      ></el-image>
                    </div>
                  </div>
                  <div v-for="(peo, pInd) in item.peoples" class="dropped-people">
                    <div class="" style="width: 30px; height: 70px;">
                      <el-image style="width:100%; height: 100%" :src="require('@/assets/image/25.png')" fit="fill"></el-image>
                    </div>
                    <div class="attribute-name">{{peo.name || `席位${pInd+1}`}}</div>
                  </div>
                </div>
                <div class="block-footer">
                  <div class="wqzb-name" :title="item.wqzbmc">
                    <span>{{ `【LD3${index}】${item.wqzbmc}` }}</span>
                  </div>
                </div>
              </div>

            </template>
          </div>
          <!-- 设施区块 -->
        </div>
      </div>
    </div>
    <!-- 右侧部分 -->
    <div class="attribute-right">
      <div class="drawer-content">
        <div class="drawer-head" style="margin: 0px 10px;">
          <span>作战实力</span>
        </div>
        <!-- 上半部分树 -->
        <div class="drawer-tree">
          <el-tree
            :data="zzslTreeData"
            :props="{children: 'children',label: 'label' }"
            @node-click="handleDrawerNodeClick"
            style="font-size: 15px;color: #333333;"
          >
          </el-tree>
        </div>
        <div class="drawer-head" style="margin: 0px 10px;">
          <span>实力模块</span>
        </div>
        <!-- 下半部分属性面板 -->
        <div class="drawer-attributes">
          <!-- 人员属性 -->
          <div class="attribute-section">
            <div class="section-title">人员</div>
            <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
              <div v-for="(item, index) in personnelList"
                :key="'personnel-'+index"
                class="attribute-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'personnel', {jdysnm: '', rybm:'', ...item})">
                <div style="width: 60px;height: 80px; padding: 5px 8px;">
                  <el-image :src="require('@/assets/image/25.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 装备属性 -->
          <div class="attribute-section">
            <div class="section-title">装备</div>
            <div style="padding: 0 5px;">
              <template v-for="(equipment, i) in equipmentList">
                <div :key="i">
                  <div>{{ equipment.name }}</div>
                  <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));">
                    <div v-for="(item, index) in equipment.itemInfo"
                         :key="'equipment-'+index"
                         class="attribute-item"
                         draggable="true"
                         :title="item.name"
                         @dragstart="handleDragStart($event, 'equipment', {...equipment, ...item})" style="flex-direction: column;"
                    >
                      <div style="width: 75px; height: 55px;padding: 5px;">
                        <el-image :src="equipment.icon ? require(`@/assets/image/wqzb/${equipment.icon}.png`) : null" style="width: 100%; height: 100%"></el-image>
                      </div>
                      <div class="attribute-name" :title="equipment.name" >{{ `【LD3${index}】` }}</div>
                    </div>
                  </div>
                </div>
              </template>
              <div>
              </div>
            </div>
          </div>
          <!-- 设施属性 -->
          <div class="attribute-section">
            <div class="section-title">设施</div>
            <div class="attribute-items">
              <div style="margin-left: 10px">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {equipmentList} from '@/views/jdys/data'
import VXETable from 'vxe-table'

export default {
  name: 'jdys',
  data() {
    return {
      showTool: null,
      drawerVisible: false,  // 抽屉显示状态
      // 人员列表
      personnelList: [
        { name: '人员1', icon: 'el-icon-user' },
        { name: '人员2', icon: 'el-icon-user-solid' }
      ],
      // 装备列表
      equipmentList: [],
      // 设施列表
      facilityList: [
        { name: '设施1', icon: 'el-icon-office-building' },
        { name: '设施2', icon: 'el-icon-school' }
      ],
      // 拖拽后的数据块
      personnelBlock: [],
      equipmentBlock: [],
      facilityBlock: [],
      vLine: [],
      hLine: [],
      treeData: [{label: '城市作战群',}, { label: '陆军机步队',}],
      zzslTreeData: [{
        id: '01',
        label: '营',
        children: [{
          id: '0101',
          label: '连',
          children: [
            { id: '010101', label: '排' },
            { id: '010102', label: '排' },
            { id: '010103', label: '排' }
          ]
        }]
      }, {
        id: '02',
        label: '营',
        children: [{
          id: '0201',
          label: '连',
          children: [
            { id: '020101', label: '排' },
            { id: '020102', label: '排' },
            { id: '020103', label: '排' }
          ]
        }]
      }],
    }
  },
  created() {
    this.setData()
  },
  methods: {
    setData(){

      // =======================实力=========================
      // 人员
      let personnel = JSON.parse(localStorage.getItem('personnelBlock_0101'));
      this.personnelList = personnel ? personnel.list : []
      // console.log(this.personnelList);
      // 装备
      let equipment = JSON.parse(localStorage.getItem('equipmentBlock'));
      this.equipmentList = equipment ? equipment : equipmentList;
      // ================================================

      let personnelJdys = JSON.parse(localStorage.getItem('personnelJdys_01'));
      this.personnelBlock = personnelJdys ? personnelJdys.list : []
      console.log(this.personnelBlock);
      // 节点要素装备
      let equipmentJdys = JSON.parse(localStorage.getItem('equipmentJdys'));
      this.equipmentBlock = equipmentJdys || []
    },
    handleNodeClick(data) {
      console.log(data)
    },
    // 抽屉树节点点击事件
    handleDrawerNodeClick(data) {
      console.log('抽屉树节点点击:', data)
    },
    // 拖拽开始事件
    handleDragStart(event, type, item) {
      event.dataTransfer.setData('type', type)
      event.dataTransfer.setData('item', JSON.stringify(item))
    },
    // 拖拽放置事件
    handleDrop(event) {
      const type = event.dataTransfer.getData('type')
      const item = JSON.parse(event.dataTransfer.getData('item'))
      // console.log(item)
      switch(type) {
        case 'personnel':
          this.personnelBlock.push(item)
          break
        case 'equipment':
          let newObj = {
            bdnm: '',
            zbnm: item.zbnm,
            zbflnm: item.zbflnm,
            wqzbbh: item.wqzbbh,
            wqzbmc: item.name,
            cjh: item.cjh,
            peoples: item.peoples,
            ietazjm: item.ietazjm,
            ietajsm: item.ietajsm,
            icon: item.icon
          }
          this.equipmentBlock.push(newObj)
          break
        case 'facility':
          this.facilityBlock.push(item)
          break
      }
      // console.log(this.personnelBlock,this.equipmentBlock,this.facilityBlock);
    },
    getData(){
      console.log(this.equipmentBlock);
      localStorage.setItem('equipmentJdys', JSON.stringify(this.equipmentBlock));
      VXETable.modal.message({status: 'success', content: 'ok', duration: 1000});

      let jdysid = '01'
      let newPerson = {
        jdysnm: jdysid,
        list: this.personnelBlock
      }
      localStorage.setItem('personnelJdys_'+ jdysid, JSON.stringify(newPerson));
      VXETable.modal.message({status: 'success', content: 'ok', duration: 1000});
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.vxe-modal--wrapper{
  width: 0 !important;
  height: 0 !important;
}
::v-deep.vxe-modal--wrapper.is--mask:before,
::v-deep.vxe-modal--wrapper.lock--view:before{
  content: none;
}
.jdys-container {
  display: flex;
  height: 100%;
  padding: 10px;

  .left-panel {
    width: 300px;
    padding: 0px 8px 10px;
    height: 100%;
    background: #fff;
    background: url("../../assets/image/left-box.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }
  .panel-tree{
    height: calc(100% - 30px);
    margin-top: 10px;
    .custom-tree-node{
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #333;
      span{
        margin-left: 5px;
      }
    }
    ::v-deep .el-tree-node__content{
      height: 30px;
    }
  }

  .right-panel {
    flex: 1;
    width: calc(100% - 620px);
    position: relative;
  }
}
.org-section {
  height: calc(30% - 10px);
  margin-bottom: 10px;
  border: 1px solid #0a5387;
  background-color: rgb(255 255 255 / 83%);
}

.combat-section {
  height: calc(70% - 0px);
  background: url("../../assets/image/zj-box.png") no-repeat;
  background-size: 100% 100%;
}

.org-section,
.combat-section {

  .section-head {
    height: 35px;
    background: url("../../assets/image/z-bt.png") no-repeat;
    background-size: 100% 24px;
    color: #0c4988;
    background-position-y: 12px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 5px;
  }
}

.org-section h2,
.combat-section h2 {
  padding: 0 8px 8px 8px;
  margin: 0;
  border-bottom: 2px solid #1890ff;
  color: #333;
}

.org-content,
.combat-content {
  /* min-height: 200px; */
  height: calc(100% - 45px);
  position: relative;
  overflow: auto;
}

.block-head {
  margin: 5px 10px;
  font-weight: bold;
  font-size: 15px;
  color: #333;
}

.attribute-block {
  // position: relative;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  border-radius: 2px;
}
.block-title {
  display: flex;
  align-items: center;
  padding: 2px 5px;
  font-size: 15px;
  position: absolute;
  top: -12px;
  left: 5px;
  border-radius: 2px;

  i {
    font-size: 18px;
    margin-right: 8px;
    color: #409eff;
  }

  span {
    font-weight: bold;
    color: #303133;
  }
}

.block-content {
  padding: 5px;
  height: calc(100% - 0px);
  overflow-y: auto;
  margin-top: 0px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  display: flex;
  .attribute-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    padding: 5px;

    .attribute-item {
      margin: 0 auto;
      //background: #eef2f8;
      //border: 1px solid #c9d5e1;
      border-radius: 2px;
      cursor: move;
      transition: all 0.3s;

      &:hover {
        background: #f5f7fa;
        border-color: #409eff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
  .attribute-name {
    width: 100%;
    color: #16314b;
    font-size: 14px;
    text-align: center;
    padding: 2px 0px;
    background-color: #d7dee3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dropped-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #eff1f8;
    border: solid 1px #bccddf;
    border-radius: 2px;
    transition: all 0.3s;

    &:hover {
      // background: #ecf5ff;
      // transform: translateY(-2px);
    }

    i {
      font-size: 18px;
      margin-right: 8px;
      color: #409eff;
    }

    span {
      color: #606266;
    }
  }
}
.wqzb-content{
  position: relative;
  height: calc(100% - 0px);
  overflow-y: auto;
  margin: 10px;
  margin-left: 0;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  border: solid 1px #bccddf;

  .block-body{
    display: flex;
    height: 98px;
    padding: 5px;
    background-color: #ffffff;
  }
  .block-footer{
    height: 33px;
    background-color: #d7dee3;
    display: flex;
    align-items: center;
    padding: 0 5px;
    .wqzb-name{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color:#082c53;

      ::v-deep .el-input-number--mini{
        width: 90px;
        line-height: 23px;
      }
      ::v-deep .el-input-number__decrease,
      ::v-deep .el-input-number__increase{
        background-color: #d9e2ea;
      }
      ::v-deep .el-input__inner{
        border: solid 1px #a1b6c9;
        border-radius: 0px;
      }
      ::v-deep .el-input-number--mini .el-input__inner {
        padding-left: 30px;
        padding-right: 30px;
        height: 25px;
        line-height: 25px;
        font-size: 18px;
        color:#082c53;
      }
      ::v-deep .el-input-number__decrease {
        left: 1px;
        border-radius: 0px 0 0 0px;
        border-right: 1px solid #a1b6c9;
      }
      ::v-deep .el-input-number__increase {
        right: 1px;
        border-radius: 0 0px 0px 0;
        border-left: 1px solid #a1b6c9;
      }
    }
  }
  .dropped-people {
    margin: 0px 5px;
  }
  .attribute-name {
    //width: 100%;
    color: #16314b;
    font-size: 14px;
    text-align: center;
    padding: 2px 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}
.hoverTool1,
.hoverTool {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  //background-color: rgb(0 0 0 / 66%);
  background-color: rgba(6, 41, 69, 0.4);
  //border: solid 1px #bccddf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 0px;
  cursor: pointer;
  z-index: 99;

  .tool-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background-image: linear-gradient(0deg, #04a67a 0%, #197f72 100%);
    border-radius: 1px;
    border: solid 1px #a4feff;
    padding: 3px 10px;
  }
}

.hoverTool1{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: calc(100% - 32px);
}




.drawer-attributes {
  .attribute-section {
    margin-bottom: 0px;

    .section-title {
      font-size: 15px;
      font-weight: bold;
      padding: 5px;
      margin-bottom: 0px;
    }

    .attribute-items {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
      gap: 10px;
      padding: 5px;

      .attribute-item {
        margin: 0 auto;
        background: #eef2f8;
        border: 1px solid #c9d5e1;
        border-radius: 2px;
        cursor: move;
        transition: all 0.3s;

        &:hover {
          background: #f5f7fa;
          border-color: #409eff;
          box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        .attribute-name{
          color: #16314b;
          font-size: 14px;
          text-align: center;
          padding: 2px 0px;
          background-color: #d7dee3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.drawer-head{
  height: 35px;
  background: url("../../assets/image/min-title.png") no-repeat;
  background-size: 100% 24px;
  color: #0c4988;
  background-position-y: 12px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 16px;
  font-weight: bold;
  //margin: 5px 10px 0px;
}
.attribute-right{
  background: url("../../assets/image/r-box.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
}
// 添加弹框相关样式
.attribute-right,
.attribute-modal {
  :deep(.vxe-modal--box) {
    border-radius: 4px;
    overflow: hidden;
  }

  :deep(.vxe-modal--header) {
    background-color: #f5f7fa;
    padding: 12px 15px;
  }

  :deep(.vxe-modal--body) {
    padding: 0;
  }

  .drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .drawer-tree {
      padding: 5px 10px;
      flex: 0 0 auto;
      max-height: 300px;
      overflow-y: auto;
    }

    .drawer-attributes {
      flex: 1;
      height: calc(100% - 35px);
      width: 350px;
      overflow-y: auto;
      padding: 5px;
    }
  }
}

// 确保弹框内容可以正常滚动
.drawer-attributes {
  .attribute-section {
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
